<template>
	<view class="user">
		<!-- 头部 -->
		<view class="user-wrap" style="">
			<!-- <view> -->
				<!-- <view class="setting iconfont icon31shezhi"></view> -->
				<view v-if="token" class="info" style="display: flex; width: 100%; align-items: center;box-sizing: border-box; padding: 15px;">
					<view style="margin-right: 10px;" @click="tipPage()">
						<image class="avatar" mode="aspectFill" :src="userinfo.avatar"></image>
					</view>
					<view  style="text-align: left; line-height: 30px;">
						<view class="nickname">{{ userinfo.nickname }}</view>
						<view class="nickname">账号：{{userinfo.mobile||'未知'}}</view>
					</view>
					<view style="margin-left: auto;" @click="goComplete">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view  v-else @click="loginTo"  class="info" style="display: flex; width: 100%; align-items: center;box-sizing: border-box; padding:10rpx 15px 5rpx;">
					<view style="margin-right: 10px;">
						<image class="avatar" mode="aspectFill" :src="userinfo.headPicUrl"></image>
					</view>
					<view style="text-align: left; line-height: 30px;">
						<view class="nickname">未登录</view>
						<view class="nickname">账号：----</view>
					</view>
					<view style="margin-left: auto;">
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view style="display: flex; width: 100%; text-align: center;margin-top: -26rpx;">
					<view style="width: 25%;" @click="goAttention(0)">
						<view>
							{{!token?'--':userinfo.concern}}
						</view>
						<view>
							关注
						</view>
					</view>
					<view style="width: 25%;" @click="goAttention(1)">
						<view>
							{{!token?'--':userinfo.fans}}
						</view>
						<view>
							粉丝
						</view>
					</view>
					<view style="width: 25%;" @click="goAttention(2)">
						<view>
							{{!token?'--':userinfo.wishing}}
						</view>
						<view>
							许愿
						</view>
					</view>
					<view style="width: 25%;" @click="goAttention(3)">
						<view>
							{{!token?'--':userinfo.activity}}
						</view>
						<view>
							活动
						</view>
					</view>
				</view>
			<!-- </view> -->
			
		</view>

		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status-wrap">
				<!-- 单元格 -->
				<view class="cell" @click="goorder(-1)">
					<view class="cell-left">
						<!-- <image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image> -->
						<view class="cell-text">我的订单</view>
					</view>
					<view class="iconfont iconmore1" style="font-size: 14px;">查看全部 <u-icon name="arrow-right"></u-icon></view>
				</view>

				<!-- 订单状态 -->
				<view class="status-list">
					<view class="status-item" hover-class="btn-hover" v-for="(item, index) in orderStatusList"
						  :key="index"
						  @click="goorder(index)">
						<!-- <view class="item-icon" :class="item.icon"></view> -->
						<image style="width: 30px; height: 30px;" :src="item.icon"></image>
						<view class="item-text">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 滑动导航 -->
		<view style="border-radius: 20rpx; overflow: hidden; margin:20rpx;">
			<view class="cell">
				<view class="cell-left">
					<!-- <image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image> -->
					<view class="cell-text">常用工具</view>
				</view>
				<!-- <view class="iconfont iconmore1" style="font-size: 14px;">查看全部 <u-icon name="arrow-right"></u-icon></view> -->
			</view>
			<view>
					<u-grid @click="change" :col="2">
						<u-grid-item :index="0" :key="0">
							<view style="display: flex;width: 150px;">
								<view style="margin-right: 10px;flex: 0 0 50px;">
									<image style="width: 50px; height: 50px;" src="/static/aa2.png"></image>
								</view>
								<view style="line-height: 25px;width: 60%;">
									<view style="color: #333; font-size: 16px;">
										我的钱包
									</view>
									<view style="color: #999; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
										余额：{{!token?'--':userinfo.money}}
									</view>
								</view>
							</view>
							<!-- <u-icon name="photo" :size="46"></u-icon> -->
							<!-- <view class="grid-text">图片</view> -->
						</u-grid-item>
						<u-grid-item :index="1" :key="1">
							<view style="display: flex;">
								<view style="margin-right: 10px;">
									<image style="width: 50px; height: 50px;" src="/static/g2.png"></image>
								</view>
								<view style="line-height: 25px;width: 60%;">
									<view style="color: #333; font-size: 16px;">
										我的权益
									</view>
									<view style="color: #999;">
										查看我的资产
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :index="2" :key="2">
							<view style="display: flex;width: 150px;">
								<view style="margin-right: 10px;flex: 0 0 50px;">
									<image style="width: 50px; height: 50px;" src="/static/aa1.png"></image>
								</view>
								<view style="line-height: 25px;">
									<view style="color: #333; font-size: 16px;">
										我的相册
									</view>
									<view style="color: #999;">
										上传我的照片
									</view>
								</view>
							</view>
						</u-grid-item>
						<u-grid-item :index="3" :key="3">
							<view style="display: flex;">
								<view style="margin-right: 10px;">
									<image style="width: 50px; height: 50px;" src="/static/g4.png"></image>
								</view>
								<view style="line-height: 25px;">
									<view style="color: #333; font-size: 16px;">
										我的许愿
									</view>
									<view style="color: #999;">
										查看我的许愿
									</view>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
			</view>
			<!-- <com-nav :list="list" :col="4"></com-nav> -->
		</view>

		
		<view style="border-radius: 20rpx; overflow: hidden; margin:20rpx;">
			<view class="cell">
				<view class="cell-left">
					<!-- <image class="cell-icon" src="/static/images/user/icon-order.png" mode="aspectFill"></image> -->
					<view class="cell-text">其他服务</view>
				</view>
				<!-- <view class="iconfont iconmore1" style="font-size: 14px;">查看全部 <u-icon name="arrow-right"></u-icon></view> -->
			</view>
			<view style="background: #fff;">
					<u-grid  @click="click" :border="false" :col="4">
						<u-grid-item v-for="(item,index) in cadlist" :index="index" :key="index">
							<image style="width: 30px; height: 30px;" :src="item.img"></image>
							<!-- <u-icon name="photo" :size="46"></u-icon> -->
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
						
					</u-grid>
			</view>
			<!-- <com-nav :list="list" :col="4"></com-nav> -->
		</view>

		<!-- 用户功能 -->
		<!-- <view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in userList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view> -->

		<!-- 用户服务 -->
		<!-- <view class="com-item">
			<view class="com-wrap">
				<view class="cell" v-for="(item, index) in serverList" :key="index">
					<view class="cell-left">
						<image class="cell-icon" :src="item.icon" mode="aspectFill"></image>
						<view class="cell-text">{{ item.title }}</view>
					</view>
					<view class="iconfont iconmore1"></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	function tc(){
		uni.showToast({ title: '请登录后操作', icon: 'none' });
	}
import comNav from './components/com-nav.vue'
export default {
	components: {
		comNav
	},
	data() {
		return {
			token:uni.getStorageSync('token'),
			userinfo: {
				headPicUrl: '/static/images/user/avatar.jpg',
				nickName: '史蒂芬.林'
			},
			orderStatusList: [
				{ name: '待支付', icon: '/static/z1.png', status: 10 },
				{ name: '待许愿', icon: '/static/z2.png', status: 30 },
				{ name: '许愿中', icon: '/static/z3.png', status: 40 },
				{ name: '已完成', icon: '/static/z4.png', status: 50 },
				{ name: '已取消', icon: '/static/z5.png', status: 55 }
			],
			currentIndex: 0,
			list: [
				{
					icon: '/static/images/user/class-01.png',
					text: '我的电子券'
				},
				{
					icon: '/static/images/user/class-02.png',
					text: '退换/售后'
				},
				{
					icon: '/static/images/user/class-03.png',
					text: '我的积分'
				},
				{
					icon: '/static/images/user/class-04.png',
					text: '送礼提醒'
				}
			],
			userList: [
				{
					title: '收货地址',
					icon: '/static/images/user/icon-address.png',
					path: 'address-list'
				},
				{
					title: '我的收藏',
					icon: '/static/images/user/icon-collect.png',
					path: 'collect-list'
				},
				{
					title: '我的足迹',
					icon: '/static/images/user/icon-foot.png',
					path: 'browse-list'
				}
			],
			serverList: [
				{
					title: '客服中心',
					icon: '/static/images/user/icon-kefu.png',
					path: `../../TUI-Chat/chat?conversationID=C2C41`
				},
				{
					title: '帮助中心',
					icon: '/static/images/user/icon-help.png',
					path: 'help'
				},
				{
					title: '版本',
					icon: '/static/images/user/icon-about.png',
					text: '1.0.0'
				}
			],
			cadlist:[
				{name:'我的团队',img:'/static/f1.png'},
				{name:'实名认证',img:'/static/f2.png'},
				{name:'收货地址',img:'/static/f3.png'},
				{name:'在线客服',img:'/static/f4.png'},
				{name:'设置',img:'/static/f5.png'}
			]
		}
		// methods: {
		
		// }
		
	},
	onLoad() {
		console.log(uni.getStorageSync('token'))
	},
	onShow() {
		this.token=uni.getStorageSync('token')
		if(this.token){
			this.getuserinfo.getuserinfo(uni.getStorageSync('userdata').id).then((res)=>{
				if(res){
					this.userinfo=res.data
					// console.log(res,'333333')
					// if(!res.data.pwd){
					// 	uni.navigateTo({
					// 		url:'/pages/set/message/message?title=修改登录密码&type=1'
					// 	})
					// }
					uni.setStorageSync('mobile',res.data.mobile)
				}
				
				// console.log()
			})
		}
		
	},
	methods:{
		tipPage () {
			uni.navigateTo({
				url: '../user/info?uid=' + this.userinfo.id
			})
		},
		goComplete(){
			// 跳转我的资料
			uni.navigateTo({
				url:'/pages/my/complete'
			})
		},
		goAttention(id){
			if(id==0||id==1){
				uni.navigateTo({
					url:'/pages/my/attention?id='+id+"&user_id="+this.userinfo.id
				})
			}
			if(id==2){
				// 我的许愿
				uni.navigateTo({
					url:'/pages/my/mywish'
				})
			}
			if(id==3){
				uni.navigateTo({
					url:'/pages/my/myActivity?user_id='+this.userinfo.id
				})
			}
		},
		loginTo(){
			uni.navigateTo({
				url:'/pages/login/login'
			})
		},
		change(e){
			console.log(e)
			if(!this.token){
				return tc()
			}
			var url
			switch(e){
				case 0:
				url='/pages/purse/purse?title=我的钱包&type=1'
				break
				case 1:
				url='/pages/Rights/Rights?rights='+this.userinfo.rights
				break
				case 2:
				url='/pages/my/myphoto?user_id='+this.userinfo.id
				break
				case 3://我的许愿
				url='/pages/my/mywish'
				break
				
			}
			uni.navigateTo({
				url:url
			})
		},
		goorder(index){
			if(this.token){
		        uni.navigateTo({
		            url:'/pages/myorder/myorder?type=' + index
		        })
			}else{
				tc()
			}
			
		},
		click(e){
			if(!this.token){
				return tc()
			}
			console.log(e)
			var url
			switch(e){
				case 0:
				url='/pages/purse/purse?title=我的团队&type=2'
				break
				case 1:
				url='/pages/certifying/certifying'
				break
				case 2:
				url='/pages/address/address'
				break
				case 3:
				url='/pages/TUI-Chat/chat?conversationID=C2C'+this.userinfo.service_id
				break
				case 4:
				url='/pages/set/set'
				break
			}
			if(e==3){
				console.log(this.userinfo.service_id)
				if(!this.userinfo.service_id){
					return uni.showToast({
						title: '暂无客服',
						icon: 'none',
						duration: 2000
					})
				}
			}
			uni.navigateTo({
				url:url
			})
		}
		
	}
};
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
.btn-hover {
	background: #f2f2f2 !important;
}
.user {
	.user-wrap {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		color: #fff;
		height: 50vw;
		// padding: 30rpx;
		z-index: 9;
		border-radius: 0 0 20% 20%;
		// background: url('https://handsel.oss-cn-shenzhen.aliyuncs.com/1588938371592.jpg') no-repeat;
		background: #FA9700;
		background-size: cover;
		.setting {
			color: #fff;
			position: absolute;
			top: 60rpx;
			left: 60rpx;
			font-size: 50rpx;
		}
		.info {
			// position: absolute;
			text-align: center;
			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 50%;
			}
			.nickname {
				color: #fff;
				font-size: 28rpx;
			}
		}
	}
	.order-status {
		padding: 0 20rpx;
		margin-top: -10vw;
		.status-wrap {
			border-radius: 25rpx;
			overflow: hidden;
			.status-list {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				background: #fff;
				padding-top: 30rpx;
				padding-bottom: 30rpx;
				.status-item {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.item-icon {
						line-height: 1;
						font-size: 65rpx;
						color: #bbb;
					}
					.item-text {
						font-size: 28rpx;
						color: #666;
						margin-top: 5rpx;
					}
				}
			}
		}
	}
	.com-item {
		padding-left: 20rpx;
		padding-right: 20rpx;
		margin-top: 20rpx;
		.com-wrap {
			border-radius: 25rpx;
			overflow: hidden;
		}
	}
	.cell {
		height: 80rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		border-bottom: 1px solid #f8f8f8;
		&:active {
			background: #f2f2f2;
		}
		&:last-child {
			border-bottom: none !important;
		}
		.cell-left {
			display: flex;
			align-items: center;
			.cell-icon {
				width: 50rpx;
				height: 50rpx;
			}
			.cell-text {
				color: #666;
				font-size: 28rpx;
				margin-left: 20rpx;
			}
		}
		.iconfont {
			font-size: 40rpx;
			color: #999;
		}
	}
}
</style>
